import CountUI from '../../components/Count';

//react-redux提供了一个connect方法 创建容器组件和用来连接UI组件和redux
import { connect } from 'react-redux';

import { createIncrementAction, createDecrementAction, createWaitIncrementAction } from '../../redux/actions/count_action';


/* import store from '../../redux/store';
console.log('store.getState()', store.getState()); */
//import store from '../../redux/store';

console.log('容器组件');



//connect方法的第一个参数函数，当react-redux调用这个函数的时候，会直接传入当前store中的state状态值
function mapStateToProps(state) {//组件容器传值给UI组件(映射一个状态给props )
    console.log('我是connect方法的第一个参数  是一个函数');
    return {
        /* sum: store.getState() */
        sum: state
    }
}

//connect方法的第二个参数，当react-redux调用这个函数的时候，会把这个函数返回的对象的内容通过props传递给UI组件
//当函数调用的时候，会自动的向函数中传入dispatch作为参数
function mapDispatchToProps(dispatch) {
    console.log('我是connect方法的第二个参数 是一个函数');
    return {
        jia: (value) => {
            //store.dispatch(createIncrementAction(value));
            dispatch(createIncrementAction(value));
        },
        jian: (value) => {
            // store.dispatch(createDecrementAction(value));
            dispatch(createDecrementAction(value));
        },
        dydjia: (value) => {
            // store.dispatch(createWaitIncrementAction(value));
            dispatch(createWaitIncrementAction(value));
        }
    }
}


//创建容器组件 并连接UI组件
const countContainer = connect(mapStateToProps, mapDispatchToProps)(CountUI);

export default countContainer;
